<template>
  <div id="mainbox">
    <div class="cenbox">
      <h2 class="top_head"><span></span>会话</h2>
      <div class="xiaoxi">
        <div class="left">
          <div class="top">
            <tiny-input clearable v-model="snameval" placeholder="请输入查找用户" @change="(val) => {store.getAllUser(val);}"></tiny-input>
          </div>
          <!-- 搜索后出现所有未添加的用户列表 -->
          <div class="finduser" v-show="alluser.length > 0">
            <div class="box" v-for="item in alluser" :key="item._id">
              <img src="/Logo.png" alt="" />
              <p>{{ item.username }}</p>
              <button @click="() => {store.sendFriendRequest(item._id);}">
                添加用户
              </button>
            </div>
          </div>
          <div class="addgroup">
            <button @click="showModal">新建群聊</button>
            <a-modal v-model:open="open" title="新建群聊" @ok="handleOk">
              <p>
                群名称：
                <input type="text" style="width: 220px; padding: 3px" v-model="groupName" placeholder="请输入群名称"/>
              </p>
            </a-modal>
          </div>
          <!-- 所有的用户，群聊，好友申请 -->
          <div class="findlistAcion">
            <!-- 群聊列表 AllGroupList-->
            <a-collapse v-model:activeKey="activeKey" accordion>
              <a-collapse-panel key="1" :header="AllGroupList.length > 0 ? `群聊列表${AllGroupList.length}` : '群聊列表'">
                <div v-for="item in AllGroupList" :key="item._id" :class="item._id == groupID._id ? 'yesuserbox checkyesuserbox' : 'yesuserbox'"
                  @click="() => {store.saveActiveUser(item, false);}">
                  <p><img :src="item.imgUrl" alt="" /></p>
                  <p class="txt1">{{ item.name }}---{{ item.members.length }}</p>
                </div>
              </a-collapse-panel>
              <!-- 好友列表 -->
              <a-collapse-panel key="2" :header=" allFriends.length > 0 ? `好友列表${allFriends.length}` : '好友列表' ">
                <div v-for="item in allFriends" :key="item._id" :class=" item._id == acitveUser._id ? 'yesuserbox checkyesuserbox' : 'yesuserbox'"
                    @click="() => {store.saveActiveUser(item, true);}">
                  <p><img :src="item.imgUrl" alt="" /></p>
                  <p class="txt1">{{ item.username }}</p>
                </div>
              </a-collapse-panel>
              <!-- 好友申请 -->
              <a-collapse-panel key="3" :header=" pendingRequests.length > 0 ? `新的好友申请${pendingRequests.length}` : '新的好友申请'">
                <div class="newuserbox" v-for="item in pendingRequests" :key="item._id">
                  <p>{{ item.userID.username }}的好友申请</p>
                  <div>
                    <button @click="() => {store.acceptFriendRequest(item);}">
                      同意
                    </button>
                    <button @click=" () => {store.rejectFriendRequest(item);}">
                      拒绝
                    </button>
                  </div>
                </div>
              </a-collapse-panel>
              <!-- 群聊列表申请 -->
              <a-collapse-panel key="4" :header=" pendingRequestsGroup.length > 0 ? `新的群聊申请${pendingRequestsGroup.length}` : '新的群聊申请'">
                <div class="newuserbox" v-for="item in pendingRequestsGroup" :key="item._id">
                  <p>{{ item.userID.username }}邀你加入{{ item.groupID.name }}</p>
                  <div>
                    <button @click="() => {store.respondToGroupInvite(item, 1);}">同意</button>
                    <button @click="() => {store.respondToGroupInvite(item, 2);}">拒绝</button>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </div>
        </div>
        <div class="right">
          <div class="morbox" v-show="!acitveUser._id && !groupID._id">
            <h1>您好</h1>
            <p>请选择用户进行沟通吧！</p>
            <img src="../../../public/robot.gif" alt="" />
          </div>
          <div class="messageandsend" v-show="acitveUser._id || groupID._id">
            <div class="top">
              <h2 v-show="acitveUser.username">{{ acitveUser.username }}</h2>
              <h2 v-show="groupID.name">{{ groupID.name }}</h2>
              <h2 v-show="!acitveUser.username && !groupID.name">请选择用户聊天吧</h2>
              <button v-show="groupID.name" class="btn" @click=" () => { store.getGroupMembers();}">
                邀请好友
              </button>
              <div class="floatbox" v-show="flagGroup && groupID.name">
                <div class="box" v-for="item in allnotInGroup" :key="item._id">
                  <img :src="item.imgUrl" alt="" />
                  <p>{{ item.username }}</p>
                  <button @click="() => {store.sendFriendToGroup(item._id);flagGroup = false;}">邀请</button>
                </div>
              </div>
            </div>
            <!-- 聊天内容区域 -->
            <div class="messagebox">
              <div :class="item.sender_id === userId ? 'box rigbox' : 'box'" v-for="item in messageList" :key="item._id">
                <div v-if="item.context_type === 0">
                  <div class="imgbox">
                    <div class="txandname">
                      <img :src="item.sender_avatar" alt="" />
                      <p>{{ item.sender_name }}</p>
                    </div>
                    <p class="onetext">{{ item.content }}</p>
                  </div>
                </div>
                <div v-else-if="item.context_type === 1">
                  <div class="imgbox">
                    <div class="txandname">
                      <img :src="item.sender_avatar" alt="" />
                      <p>{{ item.sender_name }}</p>
                    </div>
                    <div class="imgtxt" v-html="item.content"></div>
                  </div>
                </div>
                <div v-else-if="item.context_type === 2">
                  <video controls :src="item.content"></video>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="bqbandimg">
                <!-- 表情包 -->
                <p @click="changeEmojiPicker">
                  <svg t="1733135784050" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15742" width="26" height="26">
                    <path d="M898.37 346.64a422.106 422.106 0 0 0-222.81-225.09 417.89 417.89 0 0 0-325.88 0 417.704 417.704 0 0 0-133.07 90.62C137.82 291.76 93.76 399.32 94.05 511.31c-0.33 169.32 100.2 322.58 255.64 389.72a413.825 413.825 0 0 0 162.98 33.18c111.26 0.17 217.91-44.47 295.89-123.84a417.214 417.214 0 0 0 89.77-134.39c43.93-105.38 43.94-223.95 0.04-329.34zM872.1 511.23c-0.13 200.26-161.41 363.16-359.43 363.16-198.15 0-359.35-162.94-359.35-363.16 0-200.26 161.25-363.12 359.35-363.12 198.19-0.04 359.43 162.85 359.43 363.12z m0 0" p-id="15743" ></path> <path d="M347.4 467.08c32.67 0 59.19-26.82 59.19-59.74s-26.57-59.74-59.19-59.74-59.06 26.73-59.06 59.61c-0.15 15.78 6 30.97 17.09 42.21a59.26 59.26 0 0 0 41.97 17.66z m330.62 1.15c32.5 0 58.97-26.82 58.97-59.7 0-33.04-26.48-59.82-58.97-59.82-32.66 0-59.19 26.78-59.19 59.82 0.01 32.88 26.57 59.7 59.19 59.7z m48.47 133.62c-13.23-9.46-31.58-6.72-41.48 6.19-39.65 53.81-104.09 85.75-172.35 85.75-68.21 0-132.73-31.99-172.3-85.66-9.86-12.96-28.25-15.72-41.48-6.23-13.12 9.92-15.8 28.56-6.02 41.77a269.993 269.993 0 0 0 94.43 80.03c78.78 39.96 171.9 39.96 250.68 0a269.794 269.794 0 0 0 94.56-80.12c9.65-13.25 6.96-31.76-6.04-41.73z m0 0" p-id="15744" ></path>
                  </svg>
                </p>
                <div class="bqblist" v-show="emojiPickerVisible">
                  <EmojiPicker :native="true" @select="addEmoji" />
                </div>
                <!-- 自定义表情包 -->
                <p @click="dtbqbisflag = !dtbqbisflag">
                  <svg t="1733135930856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16667" width="26" height="26">
                    <path d="M754.4 185.6c0.4 0 0.8-0.3 0.8-0.8v-76c0-10.2 4.1-20 11.3-27.1s16.9-11.3 27.1-11.3 20 4.1 27.1 11.3c7.2 7.2 11.3 16.9 11.3 27.1v76c0 0.4 0.3 0.8 0.8 0.8h76c10.2 0 20 4.1 27.1 11.3 7.2 7.2 11.3 16.9 11.3 27.1s-4.1 20-11.3 27.1c-7.2 7.2-16.9 11.3-27.1 11.3h-76c-0.4 0-0.8 0.3-0.8 0.8v76c0 10.2-4.1 20-11.3 27.1-7.2 7.2-16.9 11.3-27.1 11.3s-20-4.1-27.1-11.3-11.3-16.9-11.3-27.1v-76c0-0.4-0.3-0.8-0.8-0.8h-76c-10.2 0-20-4.1-27.1-11.3-7.2-7.1-11.3-16.9-11.3-27.1s4.1-20 11.3-27.1c7.2-7.2 16.9-11.3 27.1-11.3h76zM819.2 544c0-35.4-5.5-69.4-15.7-101.4-0.2-0.5 0.2-1 0.7-1h78.3c0.4 0 0.7 0.2 0.8 0.6 13.8 54 16.9 112.4 6.8 172.6-28.3 169.3-160.8 302.9-329.9 332.4C276.4 996.6 34 754.2 83.3 470.4c29.4-169.1 163-301.7 332.3-330.1 60.3-10.1 118.6-7 172.7 6.8 0.3 0.1 0.6 0.4 0.6 0.8v78.3c0 0.5-0.5 0.9-1 0.7-32-10.2-66-15.7-101.4-15.7-194.7 0-350.4 167.2-331.2 365.9 15.2 157.5 140.6 283 298.1 298.1C652 894.4 819.2 738.7 819.2 544zM281.9 434.3c3.4-36.7 32.5-65.8 69.2-69.2 47.6-4.4 88.2 36.1 83.7 83.7-3.4 36.7-32.5 65.8-69.2 69.2-47.6 4.5-88.1-36-83.7-83.7z m325.2-69.2c-36.7 3.4-65.8 32.5-69.2 69.2-4.4 47.6 36.1 88.2 83.7 83.7 36.7-3.4 65.8-32.5 69.2-69.2 4.5-47.6-36-88.1-83.7-83.7zM486.4 800c54.3 0 106.5-21.5 144.9-59.9C669.5 701.9 691 650 691.2 596c0-0.4-0.3-0.8-0.8-0.8h-408c-0.4 0-0.8 0.4-0.8 0.8 0.2 54 21.7 105.9 59.9 144.1 38.4 38.4 90.6 59.9 144.9 59.9z" fill="#555555" p-id="16668" ></path>
                  </svg>
                </p>
                <div class="dtbqblist" v-show="dtbqbisflag">
                  <div class="image" v-for="(item, index) in emojiList" :key="index" @click="() => {store.sendAllmessage(item, 1);dtbqbisflag = false;}">
                    <img :src="`/emot/${item}`" width="150px" height="150px" alt="图片" />
                  </div>
                </div>
                <!-- 图片信息 -->
                <p>
                  <svg t="1733136023246" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22202" width="26" height="26">
                    <path d="M867.90864 574.538232V257.779543a50.844091 50.844091 0 0 0-50.844092-50.844091h-610.129096a50.844091 50.844091 0 0 0-50.844092 50.844091v499.797418l430.141013-257.779543a152.532274 152.532274 0 0 1 157.108243 0z m0 118.466733l-177.445879-106.264151a50.844091 50.844091 0 0 0-50.844092 0L254.220457 817.064548h562.844091a50.844091 50.844091 0 0 0 50.844092-50.844091z m-660.973188-587.757696h610.129096a152.532274 152.532274 0 0 1 152.532274 152.532274v508.440914a152.532274 152.532274 0 0 1-152.532274 152.532274h-610.129096a152.532274 152.532274 0 0 1-152.532274-152.532274v-508.440914a152.532274 152.532274 0 0 1 152.532274-152.532274z m127.110228 355.90864a76.266137 76.266137 0 1 1 76.266137-76.266137 76.266137 76.266137 0 0 1-76.266137 76.266137z" fill="#666666" p-id="22203"></path>
                  </svg>
                </p>
              </div>
              <textarea placeholder="请输入消息内容..." v-model="message" @keydown.enter="(e) => {e.preventDefault();store.sendAllmessage(message, 0);message = '';}"></textarea>
              <button @click="() => {store.sendAllmessage(message, 0);message = '';}">
                发送/Enter
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { TinyInput } from "@opentiny/vue";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store/messagePinia";
import EmojiPicker from "vue3-emoji-picker";
import "vue3-emoji-picker/css";

let store = useUserStore();
let userId = JSON.parse(sessionStorage.getItem("user"))._id;
let {
  alluser,
  pendingRequests,
  allFriends,
  acitveUser,
  AllGroupList,
  groupID,
  allnotInGroup,
  flagGroup,
  pendingRequestsGroup,
  messageList,
} = storeToRefs(store);
const activeKey = ref([""]); //默认选中好友列表
const snameval = ref(""); //搜索姓名

let message = ref(""); //用户输入的消息
let emojiPickerVisible = ref(false); //表情选择器是否显示
let dtbqbisflag = ref(false); //自定义表情包是否显示

let emojiList = ref(["001.gif","002.gif","003.gif","004.jpg","005.jpg","006.jpg","007.jpg","008.jpg","009.jpg","010.jpeg","011.gif","012.jpg","013.jpg","014.jpeg","015.jpg","016.jpg","017.jpg","018.jpg","019.jpg","020.gif",]);

// 控制表情包选择器是否显示
let changeEmojiPicker = () => {
  emojiPickerVisible.value = !emojiPickerVisible.value;
};
// 在输入框中添加表情
let addEmoji = (emoji) => {
  message.value += String(emoji.i); // emoji.i 表示选中的表情字符
  changeEmojiPicker();
};

// 添加群聊
const open = ref(false);
let groupName = ref("");
const showModal = () => {
  open.value = true;
};
const handleOk = () => {
  store.createGroup(groupName.value);
  open.value = false;
  groupName.value = "";
};
</script>
<style scoped lang="scss">
#mainbox {
  width: 100%;
  height: calc(100vh - 76px);
  overflow: scroll;
  .cenbox {
    width: 100%;
    height: 94%;
    border-radius: 16px;
    background-color: white;
    margin-top: 2%;
    overflow: hidden;
    .top_head {
      font-size: 20px;
      margin: 15px;
      border-bottom: 1.5px solid #e5e5e5;
      padding-bottom: 16px;
      span {
        border: 3.5px solid #3dd4a7;
        display: inline-block;
        height: 23px;
        border-radius: 3px;
        margin-right: 10px;
        position: relative;
        top: 4px;
      }
    }
    .xiaoxi {
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 88%;
      .left {
        width: 22%;
        height: 100%;
        border-right: 2px solid #f5f5f5;
        .top {
          width: 100%;
          height: 46px;
          padding-top: 7px;
        }
        .finduser {
          width: 100%;
          height: 93%;
          overflow: scroll;
          .box {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid black;
            display: flex;
            background-color: #59a890;
            justify-content: space-between;
            align-items: center;
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
          }
        }
        .addgroup {
          button {
            margin: 10px;
            padding: 5px 20px;
          }
        }
        .finduser::-webkit-scrollbar {
          width: 0px;
          height: 0px;
        }
        .findlistAcion {
          .yesuserbox {
            display: flex;
            background-color: #f2fbfa;
            border-bottom: 5px solid white;
            align-items: center;
            border-radius: 3px;
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              margin: 10px;
              margin-bottom: 0px;
            }
            .txt1 {
              position: relative;
              top: 6px;
              left: 16px;
              font-size: 18px;
            }
          }
          .yesuserbox:hover {
            background-color: #e5e5e5;
          }
          .checkyesuserbox {
            background-color: #e5e5e5;
          }
          .newuserbox {
            display: flex;
            border-bottom: 5px solid white;
            align-items: center;
            height: 50px;
            background-color: #a8e9d4;
            justify-content: space-between;
            p {
              margin-top: 10px;
            }
            button {
              position: relative;
              top: 2px;
            }
          }
        }
      }
      .right {
        width: 78%;
        height: 100%;
        background-color: #f2fbfa;
        .morbox {
          width: 100%;
          height: 100%;
          background-color: #c9ebe7;
          padding: 20px;
          box-sizing: border-box;
          position: relative;
          h1 {
            margin: 25px;
            font-weight: bold;
            font-size: 45px;
          }
          p {
            font-weight: bold;
            font-size: 22px;
            margin-left: 20px;
          }
          img {
            margin-left: 160px;
            margin-top: -20px;
          }
        }
        .messageandsend {
          width: 100%;
          height: 100%;
          position: relative;
          .top {
            width: 100%;
            height: 7%;
            background: #f5f5f5;
            border-bottom: 1.5px solid #a4a3a3;
            h2 {
              line-height: 46px;
              font-size: 22px;
              margin-left: 25px;
            }
            .btn {
              position: absolute;
              right: 10px;
              top: 7px;
              padding-left: 8px;
              padding: 5px 5px;
            }
            .floatbox {
              position: absolute;
              right: 0px;
              top: 48px;
              width: 200px;
              height: 340px;
              background-color: #d0d0d0;
              overflow: scroll;
              .box {
                display: flex;
                align-items: center;
                height: 50px;
                width: 100%;
                background-color: aquamarine;
                justify-content: space-between;
                padding: 10px;
                box-sizing: border-box;
                margin-bottom: 2px;
                img {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                }
                p {
                  position: relative;
                  top: 8px;
                }
                button {
                  padding: 3px;
                }
              }
            }
          }
          .messagebox {
            width: 100%;
            height: 75%;
            overflow: scroll;
            padding: 20px;
            box-sizing: border-box;
            .box {
              width: 100%;
              margin-bottom:10px;
              overflow: hidden;
              div {
                width: 100%;
                .imgbox {
                  .txandname {
                    width:80px;
                    float:left;
                    img {
                      width: 50px;
                      height: 50px;
                    }
                    p {
                      font-size: 18px;
                    }
                  }
                  .imgtxt{
                    float:left;
                    width: 150px;
                    height: 150px;
                    position: relative;
                  }
                  .onetext{
                    float: left;
                    position: relative;
                    top: 8px;
                    font-size: 18px;
                    padding: 10px 20px;
                    border-radius: 5px;
                    background-color: white;
                  }
                }
              }
            }
            .rigbox{
              div{
                .imgbox{
                  .txandname{
                    float:right;
                    text-align:right;
                  }
                  .imgtxt{
                    float:right;
                  }
                  .onetext{
                    float: right;
                    background-color: #89d961;
                  }
                }
              }
            }
          }
          .bottom {
            width: 100%;
            height: 18%;
            background-color: antiquewhite;
            position: relative;
            .bqbandimg {
              position: absolute;
              width: 100%;
              height: 20%;
              display: flex;
              p {
                margin: 0px 3px;
              }
              .bqblist {
                position: absolute;
                top: -322px;
              }
              .dtbqblist {
                width: 360px;
                height: 240px;
                background-color: #ffffff;
                position: absolute;
                top: -242px;
                border-radius: 5px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                overflow: scroll;
                .image {
                  width: 90px;
                  height: 90px;
                  margin: 5px;
                  img {
                    width: 90px;
                    height: 90px;
                    // width: 100%;
                  }
                }
              }
            }
            textarea {
              width: 100%;
              height: 100%;
              padding: 8px;
              box-sizing: border-box;
              outline: none; /* 去掉选中时的默认轮廓 */
              border: 0px;
              padding-top: 35px;
            }
            button {
              position: absolute;
              right: 1px;
              bottom: 1px;
              padding: 5px 15px;
            }
          }
        }
      }
    }
  }
}
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
